<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webapi</title>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <!-- <h3><span><input type="button" value="提交"></span></h3> -->
    <!-- <div><input type="text"></div> -->
    <input type="text" onkeyup="myOnkeyUp()">
    <p></p>
    <img src="sh.jpg" alt="加载失败" title="这是一个图片" width="100px" height="100px">
</body>
<script>
    console.log(document.querySelector('.box1'))

</script>
<script>
    let img=document.querySelector('img');
    console.log(img)
    img.title="已经修改";
    img.onclick=function(){
        alert('点击成功');
    }


    // //事件源
    // let button =document.querySelector('input');
    // //绑定事件类型
    // button.onclick=function(){
    //     alert('提交成功');
    // }

    let input=document.querySelector('input');
    // input.onkeydown=function(){
    //     console.log("键盘正在按下")
    //     let a=event.keyCode;
    //     console.log(a);
    //     let b=String.fromCharCode(a);
    //     console.log(b);
    // }
    input.onkeypress=function(){
        console.log("键盘正在按下")
        let a=event.keyCode;
        console.log(a);
        let b=String.fromCharCode(a);
        console.log(b);
    }
    function myOnkeyUp(){
        console.log("按键抬起");
    }
    input.onkeydown=function(event){
        if(event.shiftKey){
            alert("shift键被按下");
        }
        if(event.ctrlKey){
            alert("ctrl键被按下");
        }
    }
    let span = document.querySelector('span');
</script>
</html>